<template>
  <je-modal
    v-model:visible="visibleModule"
    width="510px"
    height="500px"
    :title="$t('AssignmentConstructor.title')"
    class="assignment-constructor"
    :resize="false"
    :maximizable="false"
    cancel-button
    :ok-button="addModule"
    @close="cancelModal"
  >
    <je-grid
      ref="grid"
      border
      auto-resize
      show-overflow="ellipsis"
      keep-source
      show-header-overflow
      resizable
      height="100%"
      size="mini"
      header-align="center"
      :edit-config="{
        trigger: 'click',
        mode: 'cell',
        showUpdateStatus: true,
        showInsertStatus: false,
      }"
      :data="gridData"
    >
      <je-column width="40" align="center">
        <template #header>
          <i style="font-size: 16px; cursor: pointer" class="fal fa-plus" @click="addColumn"></i>
        </template>
        <template #default="{ row }">
          <i
            style="font-size: 16px; cursor: pointer"
            class="fal fa-times"
            @click="deleteColumn(row)"
          ></i>
        </template>
      </je-column>

      <je-column
        field="field"
        :title="$t('AssignmentConstructor.field')"
        width="50%"
        :edit-render="inputRender"
      >
        <template #edit="{ row }">
          <je-select-grid
            v-model:value="row.field"
            editable
            config-info="JE_CORE_RESOURCEFIELD,field,RESOURCEFIELD_CODE,S"
            :querys="[
              {
                code: 'RESOURCEFIELD_FUNCINFO_ID',
                type: '=',
                value: workFlowInfo.funcId,
                cn: 'and',
              },
              {
                code: 'RESOURCEFIELD_XTYPE',
                type: 'notIn',
                value: ['child', 'fieldset'],
                cn: 'and',
              },
            ]"
            :orders="[{ code: 'SY_ORDERINDEX', type: 'ASC' }]"
          />
        </template>
        <template #default="{ row }">
          {{ getFieldName(row.field) }}
        </template>
      </je-column>

      <je-column
        field="value"
        :title="$t('AssignmentConstructor.value')"
        :edit-render="inputRender"
      >
        <template #edit="{ row }">
          <je-select v-model:value="row.value" :options="JE_WF_DEFAULTVALUE" editable />
        </template>
        <template #default="{ row }">
          {{ getSelectLabel(row.value, JE_WF_DEFAULTVALUE) }}
        </template>
      </je-column>
    </je-grid>
  </je-modal>
</template>

<script>
  import { defineComponent, ref, onMounted } from 'vue';
  import { Modal, Grid, Select, InputSelect } from '@jecloud/ui';
  import { isEmpty, isNotEmpty } from '@jecloud/utils';
  import { inputRender } from '@/helper/edit-render';
  import { JE_WF_DEFAULTVALUE } from '@/helper/constant';

  export default defineComponent({
    name: 'AssignmentConstructor',
    components: {
      JeModal: Modal,
      JeGrid: Grid,
      JeColumn: Grid.Column,
      JeSelect: Select,
      JeSelectGrid: InputSelect.Grid,
    },
    props: {
      workFlowInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
      checkedRow: {
        type: Object,
        default: () => {
          return {};
        },
      },
      funcFields: Array,
    },
    emits: ['closeModal'],
    setup(props, { emit }) {
      const visibleModule = ref(true);
      const gridData = ref([]);
      const grid = ref(null);
      const parentRow = ref(props.checkedRow);

      //初始化数据
      const initData = () => {
        //回显列表数据
        const assignmentFieldConfiguration = props.checkedRow.assignmentFieldConfiguration;
        if (isEmpty(assignmentFieldConfiguration)) {
          gridData.value = [];
        } else {
          const datas = assignmentFieldConfiguration.split(',');
          const parentData = [];
          if (isNotEmpty(datas) && datas.length >= 2) {
            const valueData = datas[1].split('~');
            const fieldData = datas[0].split('~');
            valueData.forEach((item, index) => {
              parentData.push({ value: item, field: fieldData[index] });
            });
          }
          gridData.value = parentData;
        }
      };

      onMounted(() => {
        initData();
      });

      //添加列
      const addColumn = async () => {
        const obj = {
          field: '',
          code: '',
        };
        await grid.value.insertAt(obj, -1);
      };

      //删除列
      const deleteColumn = (row) => {
        grid.value.remove(row);
      };

      //点击确定
      const addModule = () => {
        let data = '';
        const fieldData = [];
        const valueData = [];
        grid.value.getTableData().fullData.forEach((item) => {
          fieldData.push(item.field);
          valueData.push(item.value);
        });
        if (fieldData.length > 0 && valueData.length > 0) {
          data = fieldData.join('~') + ',' + valueData.join('~');
        }
        parentRow.value.assignmentFieldConfiguration = data;
        emit('closeModal');
      };

      //弹窗关闭
      const cancelModal = () => {
        emit('closeModal');
      };

      //列表单元格格式化
      const getSelectLabel = (value, list, valueProp = 'value', labelField = 'label') => {
        const item = list.find((item) => item[valueProp] === value);
        return item ? item[labelField] : value;
      };

      const getFieldName = (value) => {
        const item = props.funcFields.find((item) => {
          const fieldVal = item['RESOURCEFIELD_CODE'];
          return fieldVal === value;
        });
        return item ? item['RESOURCEFIELD_NAME'] : value;
      };

      return {
        visibleModule,
        addModule,
        gridData,
        addColumn,
        deleteColumn,
        grid,
        inputRender,
        JE_WF_DEFAULTVALUE,
        getSelectLabel,
        cancelModal,
        getFieldName,
      };
    },
  });
</script>

<style lang="less"></style>
